<template>
  <div>
    <!-- 顶部导航 -->
    <div  class="nav">
       <van-cell  is-link @click="showLeft" style=" width:144px; font-size:10px; text-align:center; height:40px;line-height:21px "  position="left"><van-icon name="location-o" size="14" />上海
      </van-cell>

    <div class="header">
      <a href="">综合</a>
      <a href="">销量</a>
    </div>

      <van-cell  @click="showRight" style="width:130px; font-size:12px; height:40px;line-height:21px" position="right"><van-icon name="apps-o" size="14" /> 筛选
      </van-cell>
    </div>
    <!-- 左侧弹出框 -->
    <van-popup  class="addl" position="left" v-model="showl">
      <div class="left-location">
      <h2>配送至</h2>
      <h3>当前定位城市:太原市</h3>
        <van-divider :style="{ color: '#cea461', borderColor: '#cea461'}"/>
      </div>
      <van-sidebar v-model="activeKey">
          <van-sidebar-item title="上海" />
          <van-sidebar-item title="北京" />
          <van-sidebar-item title="广州" />
          <van-sidebar-item title="广州" />
          <van-sidebar-item title="广州" />
          <van-sidebar-item title="全国其他城市" />
      </van-sidebar>
       <van-divider :style="{ color: '#cea461', borderColor: '#cea461',width:'254px',margin:'18px 0 0 18px' }"/>
    </van-popup>

    <!-- 右侧弹出框 -->
    <van-popup class="addr" position="right" v-model="showr"  >
      <div class="right-location">
        <span>筛选</span>
      </div> 
      <van-divider :style="{ margin:'0',color: '#cea461', borderColor: '#cea461'}"/>     
      <div class="span">
        <span>口味</span>
      </div>
     <div class="btn">
        <button>全部</button>
        <button>雪域燕麦</button>
        <button>雪域口味</button>
        <button>芝士口味</button>
     </div>
          <div class="btn2">
      <p><button>重置</button>
      <button>确定</button></p>
     </div>
    </van-popup>


      <!-- 轮播图 -->
      <cake-swiper/>
    
      <!-- 商品卡片 -->
      <card-view/>

    <!-- 底部导航 -->
   <navigation/>
  </div>
</template>

<script>
import CakeSwiper from '../components/CakeSwiper.vue' 
import Navigation from '../components/Navigation.vue'
import CardView from '../components/CardView.vue';
  export default {
    methods: {
    showLeft() {
      this.showl = true;
    },
    showRight() {
      this.showr = true;
    },
  },

    data() {
      return {

        active:2,
        showl: false,
        showr: false,
        activeKey: 0,
      }
    },
     components: {
      Navigation,
      CakeSwiper,
      CardView
    },
  }
</script>

<style lang="scss">
.nav{
  z-index: 11;
  width: 100vw;
  display: flex;
  height: 40px;
  justify-content: space-between;
  border-bottom:1px solid #a38d6b;
  position:fixed;
}
.header{
  width: 375px;
  height:40px;
  line-height: 40px;
  text-align: center;
  justify-content: space-between;
  background-color: #fff;

  a{
    width:57px;
    height: 39px;
    display: inline-block;
    color: #3e3e3e;
    background-color: #fff;
    
  }
}
.addl{
    width: 290px;
    height: 100%;
}
.left-location{
  margin-left: 18px;
  width: 254px;
  height: 84px;
  padding: 10px 0;
  align-content: center;
  vertical-align: center;
  h2{
    height: 36px;
     color:#3e3e3e;
    font-size: 18px;
    margin: 6px 0;
    line-height: 36px;
  }
  h3{
    height: 21px;
    font-size: 14px;
    line-height: 21px;
     color:#3e3e3e;


  }
}
.addr{
  // position: fixed;
    z-index: 1001;
    width: 270px;
    height: 100%;
}
.addr .right-location{
  width: 254px;
  height: 44px;
  align-content: center;
}
.addr .right-location span{
    display: inline-block;
    height: 44px;
    color:#a38d6b;
    font-size: 16px;
    line-height: 44px;
  }
.addr .span{
  height: 58px;
}
.addr span{
  display: inline-block;
    height: 53px;
    font-size: 16px;
    color: #939393;
    line-height: 53px;
     margin: 0 0 0 16px;
  }

.btn{
  margin-top: 0px
}
.btn button{
  background-color: #fff;
  float: left;
    width:78px;
    height: 28px;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 3.25%;
    text-align: center;
    padding: 0.05rem 0;
    position: relative;
    margin-bottom: 0.12rem;
    color: #9c9c9c;
    border: 1px solid #eeeeee;
}

.addr .btn2{
  display: block;
   margin-top: 78.5vh;
}
.addr .btn2 button{
  border:1px solid #a38d6b;
   height: 40px;
   background-color: #fff;
   width: 135px;
   color: #a38d6b;
}

</style>